<template>
  <!-- 巡查项目分析 -->
  <div class="app-container theme-bg-index">
    <!-- 头部区域 -->
    <header>
      <div class="center-img">
        <p>巡检项目分析</p>
        <el-date-picker
          v-model="date"
          type="daterange"
          size="small"
          class="statistics-date"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="dateChange"
        />
      </div>
    </header>
    <!-- 内容区 -->
    <section>
      <el-row :gutter="15">
        <el-col :span="12">
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title center">
              <span class="all" @click="getCheckAll">全部</span>
              <span>{{ spotCheckPro }}</span>
              <span class="more" @click="goProjectControlAssigned()"> 更多 <i class="el-icon-arrow-right" /></span>
            </h3>
            <el-row class="cont">
              <el-col :span="6">
                <EchartsPie :region-chart="regionChart" :legend="[...regionLegend]" @getRegionType="getRegionType" />
              </el-col>
              <el-col :span="18">
                <ProjectTable :list-data="regionTable" :list-header="LandlistHeader" />
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title center">
              <!-- <span class="all" @click="getProAll">全部</span> -->
              <span>{{ abnormalPro }}</span>
              <span class="more" @click="goProjectControlPatrolled()"> 更多 <i class="el-icon-arrow-right" /></span>
            </h3>
            <el-row class="cont">
              <el-col :span="6">
                <EcharsPieLiquidfill :abnormal-project="abnormalProject" @setProject="setProject" />
              </el-col>
              <el-col :span="18">
                <ProjectTable :list-data="abnormalProjectList" :list-header="LandlistHeader" />
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="24">
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title center">
              <span>近一年巡检项目</span>
            </h3>
            <el-row class="cont">
              <el-col :span="12">
                <EchartsOneBar :pro-info-count-by-month="proInfoCountByMonth" />
              </el-col>
              <el-col :span="12">
                <InspectionProjectTable :list-data="inspectionProjectList" :list-header="InspectionProjectHeader" />
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
import { InspectionItems } from '@/api/statisticalAnalysis/InspectionItems'
import EcharsPieLiquidfill from './components/EcharsPie-liquidfill'
import EchartsOneBar from './components/EchartsOneBar'
import ProjectTable from './components/ProjectTable'
import InspectionProjectTable from './components/InspectionProjectTable'
import EchartsPie from './components/EchartsPie'
export default {
  name: 'InspectionItems',
  components: {
    EchartsOneBar,
    ProjectTable,
    InspectionProjectTable,
    EcharsPieLiquidfill,
    EchartsPie
  },
  data() {
    return {
      // 时间搜索
      date: '',
      filter: {
        statisticsStartTime: '',
        statisticsEndTime: ''
      },
      // 表格头部
      LandlistHeader: [{ name: '项目名称' }, { name: '企业名称' }],
      InspectionProjectHeader: [{ name: '企业名称' }, { name: '项目个数' }],
      // 巡检项目数据
      inspectionProjectList: [],
      proInfoCountByMonth: [],
      // 地区抽查项目
      regionChart: [
        { totalAmount: 0, regionTypeName: '无', proNum: 0, proportion: 0 }
      ], // 图形数据
      regionTable: [], // 数据表格
      regionAllObj: {}, // 区分后的项目
      regionLegend: ['无'], // 图形的地区类型
      // 异常项目
      abnormalProject: {}, // 图形数据
      abnormalProjectList: [],
      // 标题
      startTime: '',
      abnormalPro: '异常项目',
      spotCheckPro: '抽查项目'
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 跳转监管-已分配项目
    goProjectControlAssigned() {
      this.$router.push('/projectControl/project-control-assigned')
    },
    // 跳转监管-已巡检项目
    goProjectControlPatrolled() {
      this.$router.push({
        name: 'projectControlPatrolled',
        params: {
          verdict: '2'
        }
      })
    },
    // 改变时间
    dateChange(e) {
      if (e) {
        this.filter.statisticsStartTime = e[0]
        this.filter.statisticsEndTime = e[1]
      } else {
        this.filter.statisticsStartTime = ''
        this.filter.statisticsEndTime = ''
      }
      this.proInfoCountByMonth = []
      this.regionTable = []
      this.getList()
    },
    getProAll() {
      this.abnormalPro = '异常项目'
      this.abnormalProjectList = this.abnormalProjectListAll
    },
    getCheckAll() {
      this.regionTable = []
      this.spotCheckPro = '抽查项目'
      for (const k in this.regionAllObj) {
        this.regionLegend.push(k)
        this.regionTable = [...this.regionTable, ... this.regionAllObj[k]]
      }
    },
    // 切换地区对应的项目
    getRegionType(type) {
      this.spotCheckPro = type
      for (const k in this.regionAllObj) {
        if (k === type) {
          this.regionTable = JSON.parse(JSON.stringify(this.regionAllObj[k]))
          break
        }
      }
    },
    async getList() {
      const { data:
        {
          inspectionProject: { inspectionProjectList, proInfoCountByMonth },
          resultLeftOn: { regionChart, regionTable },
          abnormalResult: { abnormalProject, abnormalProjectList }
        }
      } = await InspectionItems(this.filter)
      // 近一年巡检项目
      this.proInfoCountByMonth = proInfoCountByMonth
      this.inspectionProjectList = inspectionProjectList
      // 地区抽查项目
      this.regionChart = regionChart.length ? regionChart : [{ totalAmount: 0, regionTypeName: '无', proNum: 0, proportion: 0 }]
      this.regionAllObj = regionTable // 区分后的项目
      for (const k in regionTable) {
        this.regionLegend.push(k)
        this.regionTable = [...this.regionTable, ...regionTable[k]]
      }
      // 异常项目
      this.abnormalProject = abnormalProject
      this.abnormalProjectList = abnormalProjectList
      this.abnormalProjectListAll = abnormalProjectList
    },
    // 修改标题
    setProject(name) {
      // this.abnormalPro = name
      // this.abnormalProjectList = this.abnormalProjectListAll.map(item => item.)
    }
  }
}
</script>

<style lang="scss" scoped>
  * {
    margin: 0;
    padding: 0;
  }
</style>
